<!--  -->
<template>
  <div id="course">
    <div class="mainbg">
      <!-- 课程内部顶部滑动及中介翻滚组件 -->
      <ScrollNavBars :currentEle="labels[0]" :labels="labels" :itemList="itemlist" />
    </div>
  </div>
</template>

<script>
//导入滚动组件
import ScrollNavBars from "../components/Scroll/ScrollNavBar/ScrollNavBars";
//引入vuex actions state
import {mapActions,mapState} from 'vuex'

export default {
  name: "course",
  //组件注册
  components: {
    ScrollNavBars
  },
  data() {
    return {

    };
  },
  //从vuex获取数据
  computed:mapState({
    labels(state){
      return state.labels;
    },
    itemlist(state){
      return state.itemlist;
    }
  }),
  watch: {},
  methods: {
    //注册actions函数
    ...mapActions(['reqServerData'])
  },
  created() {},
  mounted() {

    //顶部滑动标签数据获取
    let params = {
      method:'get',
      methodName:'Labels',
      param:[]
    }
    this.reqServerData(params)
    //内容部分的卡片数据获取
    params = {
      method:'get',
      methodName:'Itemlist',
      param:[]
    }
    this.reqServerData(params)

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  UPDATED() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  DESTROYED() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* 导入基础CSS */
@import "../../static/base.css";
</style>